<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SVG转PNG工具 - DataTK Logo</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        padding: 20px;
      }

      .container {
        max-width: 800px;
        margin: 0 auto;
        background: white;
        border-radius: 16px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }

      .header {
        background: linear-gradient(135deg, #4361ee, #409eff);
        color: white;
        padding: 30px;
        text-align: center;
      }

      .header h1 {
        font-size: 28px;
        margin-bottom: 10px;
      }

      .header p {
        opacity: 0.9;
        font-size: 16px;
      }

      .content {
        padding: 40px;
      }

      .preview-section {
        display: flex;
        gap: 40px;
        align-items: center;
        justify-content: center;
        margin-bottom: 40px;
        flex-wrap: wrap;
      }

      .svg-preview,
      .png-preview {
        text-align: center;
      }

      .svg-preview h3,
      .png-preview h3 {
        margin-bottom: 20px;
        color: #333;
        font-size: 18px;
      }

      .logo-container {
        width: 120px;
        height: 120px;
        border: 2px dashed #e5e7eb;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f9fafb;
        margin: 0 auto 20px;
      }

      .control-panel {
        background: #f8fafc;
        border-radius: 12px;
        padding: 30px;
        margin-bottom: 30px;
      }

      .control-row {
        display: flex;
        gap: 20px;
        align-items: center;
        margin-bottom: 20px;
        flex-wrap: wrap;
      }

      .control-row:last-child {
        margin-bottom: 0;
      }

      .control-group {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      label {
        font-weight: 600;
        color: #374151;
        min-width: 80px;
      }

      input[type='range'] {
        width: 150px;
      }

      input[type='color'] {
        width: 50px;
        height: 40px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
      }

      .size-display {
        font-weight: 600;
        color: #4361ee;
        min-width: 60px;
      }

      .btn {
        background: linear-gradient(135deg, #4361ee, #409eff);
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        margin: 0 10px 10px 0;
      }

      .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(67, 97, 238, 0.4);
      }

      .btn:active {
        transform: translateY(0);
      }

      .download-section {
        text-align: center;
        padding: 20px;
        background: #f0f9ff;
        border-radius: 12px;
        border: 2px dashed #0ea5e9;
      }

      .download-section h3 {
        color: #0369a1;
        margin-bottom: 15px;
      }

      .instructions {
        background: #fef3c7;
        border: 1px solid #f59e0b;
        border-radius: 8px;
        padding: 20px;
        margin-top: 30px;
      }

      .instructions h4 {
        color: #92400e;
        margin-bottom: 10px;
      }

      .instructions ol {
        color: #92400e;
        padding-left: 20px;
      }

      .instructions li {
        margin-bottom: 5px;
      }

      canvas {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
      }

      @media (max-width: 768px) {
        .content {
          padding: 20px;
        }

        .preview-section {
          flex-direction: column;
          gap: 20px;
        }

        .control-row {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1>🎨 DataTK Logo SVG转PNG工具</h1>
        <p>将DataTK的logonotext.svg转换为高质量PNG格式</p>
      </div>

      <div class="content">
        <div class="preview-section">
          <div class="svg-preview">
            <h3>📋 原始SVG</h3>
            <div class="logo-container">
              <div id="svg-container"></div>
            </div>
            <p>动画SVG版本</p>
          </div>

          <div class="png-preview">
            <h3>🖼️ PNG预览</h3>
            <div class="logo-container">
              <canvas id="png-canvas" width="100" height="100"></canvas>
            </div>
            <p>静态PNG版本</p>
          </div>
        </div>

        <div class="control-panel">
          <div class="control-row">
            <div class="control-group">
              <label>尺寸:</label>
              <input type="range" id="sizeSlider" min="32" max="512" value="100" step="8" />
              <span class="size-display" id="sizeDisplay">100px</span>
            </div>
          </div>

          <div class="control-row">
            <div class="control-group">
              <label>背景色:</label>
              <input type="color" id="bgColor" value="#ffffff" />
            </div>
            <div class="control-group">
              <label>透明背景:</label>
              <input type="checkbox" id="transparentBg" checked />
            </div>
          </div>

          <div class="control-row">
            <button class="btn" onclick="generatePNG()">🔄 生成PNG</button>
            <button class="btn" onclick="downloadPNG()">⬇️ 下载PNG</button>
            <button class="btn" onclick="generateAllSizes()">📦 批量生成</button>
          </div>
        </div>

        <div class="download-section">
          <h3>📥 下载区域</h3>
          <p>点击"生成PNG"按钮预览效果，然后点击"下载PNG"保存文件</p>
          <div id="download-links"></div>
        </div>

        <div class="instructions">
          <h4>📝 使用说明：</h4>
          <ol>
            <li>调整尺寸滑块选择PNG大小（32px-512px）</li>
            <li>选择背景颜色或勾选透明背景</li>
            <li>点击"生成PNG"预览效果</li>
            <li>点击"下载PNG"保存文件到本地</li>
            <li>点击"批量生成"可下载多个常用尺寸</li>
          </ol>
        </div>
      </div>
    </div>

    <script>
      // DataTK Logo SVG 内容
      const svgContent = `
            <svg width="100" height="100" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stop-color="#4361ee" />
                  <stop offset="100%" stop-color="#409eff" />
                </linearGradient>
                <clipPath id="circleClip">
                  <circle cx="18" cy="14" r="12" />
                </clipPath>
              </defs>
              <g transform="translate(5, 7)">
                <circle cx="18" cy="14" r="14" stroke="url(#logoGradient)" stroke-width="2" fill="none" opacity="0.7">
                  <animateTransform 
                    attributeName="transform" 
                    attributeType="XML" 
                    type="rotate" 
                    from="0 18 14" 
                    to="360 18 14" 
                    dur="8s" 
                    repeatCount="indefinite" />
                </circle>
                <circle cx="18" cy="14" r="12" fill="url(#logoGradient)" opacity="0.9">
                  <animate attributeName="opacity" values="0.8;1;0.8" dur="3s" repeatCount="indefinite" />
                </circle>
                <g clip-path="url(#circleClip)">
                  <rect x="6" y="2" width="40" height="40" fill="rgba(255,255,255,0.05)" />
                  <rect x="9" y="18" width="2" height="8" fill="white" opacity="0.7">
                    <animate attributeName="height" values="8;12;8" dur="2s" repeatCount="indefinite" />
                  </rect>
                  <rect x="14" y="14" width="2" height="12" fill="white" opacity="0.8">
                    <animate attributeName="height" values="12;6;12" dur="2.5s" repeatCount="indefinite" />
                  </rect>
                  <rect x="19" y="10" width="2" height="16" fill="white" opacity="0.9">
                    <animate attributeName="height" values="16;20;16" dur="3s" repeatCount="indefinite" />
                  </rect>
                  <rect x="24" y="16" width="2" height="10" fill="white" opacity="0.75">
                    <animate attributeName="height" values="10;14;10" dur="2.3s" repeatCount="indefinite" />
                  </rect>
                  <path d="M6,14 Q12,8 18,14 T30,14" stroke="white" stroke-width="1.2" fill="none" opacity="0.6">
                    <animate attributeName="d" values="M6,14 Q12,8 18,14 T30,14; M6,16 Q12,22 18,16 T30,16; M6,14 Q12,8 18,14 T30,14" dur="4s" repeatCount="indefinite" />
                  </path>
                  <circle cx="18" cy="14" r="1.5" fill="white" opacity="0.9">
                    <animate attributeName="r" values="1.5;2;1.5" dur="2s" repeatCount="indefinite" />
                  </circle>
                </g>
              </g>
            </svg>
        `

      let currentCanvas

      // 初始化
      document.addEventListener('DOMContentLoaded', function () {
        displaySVG()
        generatePNG()
        setupEventListeners()
      })

      function displaySVG() {
        document.getElementById('svg-container').innerHTML = svgContent
      }

      function setupEventListeners() {
        const sizeSlider = document.getElementById('sizeSlider')
        const sizeDisplay = document.getElementById('sizeDisplay')

        sizeSlider.addEventListener('input', function () {
          sizeDisplay.textContent = this.value + 'px'
          generatePNG()
        })

        document.getElementById('bgColor').addEventListener('change', generatePNG)
        document.getElementById('transparentBg').addEventListener('change', generatePNG)
      }

      function generatePNG() {
        const size = parseInt(document.getElementById('sizeSlider').value)
        const bgColor = document.getElementById('bgColor').value
        const transparent = document.getElementById('transparentBg').checked

        // 创建静态SVG（移除动画）
        const staticSVG = svgContent
          .replace(/<animate[^>]*>.*?<\/animate>/g, '')
          .replace(/<animateTransform[^>]*\s*\/>/g, '')
          .replace(/<animateTransform[^>]*>.*?<\/animateTransform>/g, '')

        const canvas = document.getElementById('png-canvas')
        const ctx = canvas.getContext('2d')

        // 设置canvas尺寸
        canvas.width = size
        canvas.height = size

        // 清除画布
        ctx.clearRect(0, 0, size, size)

        // 设置背景
        if (!transparent) {
          ctx.fillStyle = bgColor
          ctx.fillRect(0, 0, size, size)
        }

        // 创建图像
        const img = new Image()
        const svgBlob = new Blob([staticSVG], { type: 'image/svg+xml;charset=utf-8' })
        const url = URL.createObjectURL(svgBlob)

        img.onload = function () {
          ctx.drawImage(img, 0, 0, size, size)
          URL.revokeObjectURL(url)
          currentCanvas = canvas
        }

        img.src = url
      }

      function downloadPNG() {
        if (!currentCanvas) {
          alert('请先生成PNG图片')
          return
        }

        const size = parseInt(document.getElementById('sizeSlider').value)
        const link = document.createElement('a')

        currentCanvas.toBlob(function (blob) {
          const url = URL.createObjectURL(blob)
          link.href = url
          link.download = `datatk-logo-${size}px.png`
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
          URL.revokeObjectURL(url)
        })
      }

      function generateAllSizes() {
        const sizes = [16, 24, 32, 48, 64, 96, 128, 256]
        const bgColor = document.getElementById('bgColor').value
        const transparent = document.getElementById('transparentBg').checked
        const downloadLinks = document.getElementById('download-links')

        downloadLinks.innerHTML = '<p>🔄 正在生成多个尺寸...</p>'

        let completed = 0
        const results = []

        sizes.forEach((size) => {
          generateSizePNG(size, bgColor, transparent, function (canvas, size) {
            canvas.toBlob(function (blob) {
              const url = URL.createObjectURL(blob)
              results.push({
                size: size,
                url: url,
                filename: `datatk-logo-${size}px.png`,
              })

              completed++
              if (completed === sizes.length) {
                displayDownloadLinks(results)
              }
            })
          })
        })
      }

      function generateSizePNG(size, bgColor, transparent, callback) {
        const staticSVG = svgContent
          .replace(/<animate[^>]*>.*?<\/animate>/g, '')
          .replace(/<animateTransform[^>]*\s*\/>/g, '')
          .replace(/<animateTransform[^>]*>.*?<\/animateTransform>/g, '')

        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')

        canvas.width = size
        canvas.height = size

        ctx.clearRect(0, 0, size, size)

        if (!transparent) {
          ctx.fillStyle = bgColor
          ctx.fillRect(0, 0, size, size)
        }

        const img = new Image()
        const svgBlob = new Blob([staticSVG], { type: 'image/svg+xml;charset=utf-8' })
        const url = URL.createObjectURL(svgBlob)

        img.onload = function () {
          ctx.drawImage(img, 0, 0, size, size)
          URL.revokeObjectURL(url)
          callback(canvas, size)
        }

        img.src = url
      }

      function displayDownloadLinks(results) {
        const downloadLinks = document.getElementById('download-links')
        let html =
          '<h4>✅ 批量生成完成，点击下载：</h4><div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 15px;">'

        results.forEach((result) => {
          html += `<a href="${result.url}" download="${result.filename}" style="background: #4361ee; color: white; padding: 8px 16px; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 600;">${result.size}px</a>`
        })

        html += '</div>'
        downloadLinks.innerHTML = html
      }
    </script>
  </body>
</html>
